<template>
    <div class="pet-view">
        <div class="head">
            <p-back></p-back>
            <div class="filter-list" v-if="filterListValue.length">
                 <filter-click v-for="(item,index) in filterListValue" :key="index" class="filter-click">{{item}}</filter-click>
            </div>          
        </div>
    
        <div :class="filterListValue.length ? 'petList' : 'petList-noSelect'" v-if="list.length">
            <p-search-pet v-for="(item,index) in list" :key="index" :pet = item @click.native="gotoPet(item.id)"></p-search-pet>
        </div>
        <div v-else class="no-list">
            <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-meiyouxiangguan"></use>
            </svg>
            <p>没有搜索到相关内容</p>
        </div>
    </div>
</template>
<script>
import PSearchPet from '@/components/searchpet'
import PBack from '@/components/back'
import FilterClick from '@/components/filterClick'
import { getfilterList } from '@/api.js'
export default {
    components:{
        PSearchPet,
        PBack,
        FilterClick
    },
    beforeCreate () {
      this.$bus.$on("filter",res =>{
      this.filterList = res
      })
    },
    mounted() {
       this.getPetList()
       this.getfilterValue()
    },
    beforeDestroy(){
        this.$bus.$off('filter')
    },
    data() {
        return {
            list:[],
            filterList:[],
            filterListValue:[]
        }
    },
    methods:{
        gotoPet(id){
            this.$router.push('/pet/'+id)
        },
        async getPetList() {
            if(this.$route.query.searchValue){
              this.filterList = {type:this.$route.query.searchValue}
            }
            const {data} = await getfilterList(this.filterList)
            this.list = data
        },
        getfilterValue() {
            if(this.filterList){
                const filterList = this.filterList
                for (var item in filterList){
                    if(filterList[item]){
                          if(filterList[item] === 'Dog') filterList[item] = '狗狗'
                          if(filterList[item] === 'Cat') filterList[item] = '猫咪'
                          if(filterList[item] === 'Bird') filterList[item] = '鸟'
                          if(filterList[item] === 'Rabbit') filterList[item] = '兔子'
                          if(filterList[item] === 'female') filterList[item] = '女生'
                          if(filterList[item] === 'male') filterList[item] = '男生'
                          if(filterList[item] === 'baby') filterList[item] = '幼年'
                          if(filterList[item] === 'young') filterList[item] = '青年'
                          if(filterList[item] === 'adult') filterList[item] = '成年'
                          if(filterList[item] === 'senior') filterList[item] = '老年'
                          this.filterListValue.push(filterList[item]) 
                    }                               
                }
                // console.log(this.filterListValue)
            }                       
        }
    }
}
</script>
<style lang="less" scoped>
.pet-view{
    position: relative;
    overflow:hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    .head{
        position: fixed;
        background: white;
        width: 100%;
        .filter-list{
            display: flex;
            margin: 0 0.5rem;
            white-space: nowrap;
            overflow: hidden;
            overflow-x: auto;
            .filter-click{
                background: #7db6fa;
                color: white;
                box-shadow:1px 4px 5px 0px #7db6fa8f;
            }
        }
    }  
    .petList{
        margin-top: 2.6rem;
        padding:0.5rem;
    }
    .petList-noSelect{
        margin-top: 1.3rem;
        padding:0.5rem;
    }
    .no-list{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        text-align: center;
        color: #857f85ee;
        .icon{
            height: 3rem;
            width:auto;
            margin-bottom: 0.2rem;
        }
    }
}

</style>